<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/laypage.css">

    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/messages_zh.min.js"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>
    <script src="/laydate/laydate.js"></script>
    <style type="text/css">
        input.error, textarea.error, {
            border: 1px solid red;
        }
        .error{
            color:red;
        }

        #fontCounts {
            text-align: right;
            font-size: 0.8em;
            letter-spacing: 1px;
            line-height: 0.8em;
            padding-right: 30px;
            margin-top: 2px;
        }

        .fonts {
            color: deepskyblue;
        }

        #fontss {
            color: red;
        }
    </style>
</head>
<body>
<div class="container">
    <form id="updateCaseForm">
        <br/>
        <input type="hidden" name="caseUuid" value="${(cases.caseUuid)?default("")}"/>
        <div class="form-group">
            <label for="sname">报案人：</label>
            <input type="text" class="form-control" id="sname" readonly="readonly" value="${(cases.order.user.sname)?default("")}"/>
        </div>

        <div class="form-group">
            <label for="licenseNum">出险车辆车牌号：</label>
            <input type="hidden" name="cars.carUuid" value="${(cases.cars.carUuid)?default("")}"/>
            <input type="text" class="form-control" id="licenseNum" readonly="readonly"
                   value="${(cases.cars.licenseNum)?default("")}"/>
        </div>
        <div class="form-group">
            <label for="oid">保单号：</label>
            <input type="hidden" name="order.ouid" value="${(cases.order.ouid)?default("")}"/>
            <input type="text" class="form-control" id="oid" readonly="readonly" value="${(cases.order.oid)?default("")}"/>
        </div>
        <div class="form-group">
            <label for="combname">套餐类别：</label>
            <input type="text" class="form-control" id="combname" readonly="readonly"
                   value="${(cases.order.combo.combname)?default("")}"/>
        </div>
        <div class="form-group">
            <label for="caseTime">出险时间：</label>
            <input type="text" class="form-control" id="caseTime" name="caseTime" value="${cases.caseTime}"/>
        </div>
        <div class="form-group">
            <label for="reportTime">报案时间：</label>
            <input type="text" class="form-control" id="reportTime" name="reportTime" value="${cases.reportTime}"/">
        </div>
        <div class="form-group">
            <label for="caseLocation">出险地点：</label>
            <input type="text" class="form-control" id="caseLocation" name="caseLocation"
                   value="${cases.caseLocation}"/>
        </div>
        <div class="form-group">
            <label for="payAccount">申赔金额：</label>
            <input type="text" class="form-control" id="payAccount" name="payAccount" value="${(cases.payAccount)?string("0.##")}"/>
        </div>

        <div class="form-group">
            <label for="empName">理赔专员：</label>
            <input type="hidden" name="emp.euuId" value="${cases.emp.euuId}"/>
            <input type="text" class="form-control" id="empName" readonly="readonly" value="${cases.emp.empName}"/>
        </div>
        <div class="form-group">
            <label for="remarks">备注信息：</label>
            <textarea class="form-control" id="remarks" name="remarks"
                      style="resize: none;height: 10em;">${cases.remarks}</textarea>
            <div class="form-group" id="fontCounts"></div>
        </div>
        <div class="form-group">
            <button type="button" id="saveBtn" class="btn btn-success">确认修改</button>
            <button type="button" id="cancelBtn" class="btn btn-default">取消</button>
        </div>
    </form>
</div>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $("#fontCounts").html("您还可以输入<span class='fonts'>" + (500 - $("#remarks").val().length) + "</span>字");
        $("#remarks").keyup(function () {
            var fontLength = $("#remarks").val().length;
            if (fontLength <= 500) {
                $("#fontCounts").html("您还可以输入<span class='fonts'>" + (500 - fontLength) + "</span>字");
            } else {
                $("#fontCounts").html("字数超过限制,已超出<span id='fontss'>" + (fontLength - 500) + "</span>字");
            }
        });
    });
        laydate.render({
            elem: '#caseTime',
            type: 'datetime',
            them: 'molv',
            format: 'yyyy-MM-dd HH:mm:ss'
        });
        laydate.render({
            elem: '#reportTime',
            type: 'datetime',
            them: 'molv',
            format: 'yyyy-MM-dd HH:mm:ss'
        });

    jQuery.validator.addMethod("isNumber", function (value, element) {
        return this.optional(element) || /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/.test(value);
    }, "匹配数值类型，包括整数和浮点数");
    jQuery.validator.addMethod("chinese", function (value, element) {
        return this.optional(element) || /[\u4e00-\u9fa5]+\d*$/.test(value);
    }, "只能输入中文或中文和数字");
    jQuery.validator.addMethod("compare", function (value, element, param) {
        var beginDate=jQuery(param).val();
        var beginTime = Date.parse(beginDate);
        var endTime = Date.parse(value);
        return ((endTime - beginTime) / (1000 * 60 * 60 * 24)) > 0 && ((endTime - beginTime) / (1000 * 60 * 60 * 24)) < 2;
    }, "报案时间不能小于出险时间且报案时间不能超过出现时间两天");

    function check() {
        return $("#updateCaseForm").validate({
            rules: {
                caseLocation: {
                    required: true,
                    chinese: true,
                    minlength: 2
                },
                caseTime: {
                    required: true
                },
                reportTime: {
                    required: true,
                    compare: "#caseTime"
                },
                payAccount: {
                    required: true,
                    isNumber: true
                },
                remarks: {
                    required: true,
                    rangelength: [1, 500]
                }
            }, messages: {
                caseLocation: {
                    required: "必填字段",
                    chinese: "只能输入中文或中文和数字",
                    minlength: "不能少于两个字"
                },
                caseTime: {
                    required: "必填字段"
                },
                reportTime: {
                    required: "必填字段",
                    compare: "报案时间不能小于出险时间,报案时间不能超过出现时间两天"
                },
                payAccount: {
                    required: "必填字段",
                    isNumber: "必须为数值类型(正整数或正小数,且小数位不超过2位)"
                },
                remarks: {
                    required: "必填字段",
                    rangelength: "字数不能超过500..."
                }
            }
        });
    }

    var updateCase = function () {
        if (!check().form()) {
            return;
        } else {
            if ($("#caseLocation").val() == "${cases.caseLocation}" && $("#reportTime").val() == "${cases.reportTime}" && $("#payAccount").val() == "${cases.payAccount}" && $("#remarks").val() == "${cases.remarks}") {
                $("#cancelBtn").click();
                parent.layer.msg("未做出任何修改", {icon: 3});
                return;
            }
            $.ajax({
                type: 'POST',
                url: '/case/updateCase.do',
                dataType: 'json',
                data: $("#updateCaseForm").serialize(),
                success: function (data) {
                    if (data) {
                        $("#cancelBtn").click();
                        parent.layer.msg("修改成功", {icon: 6});
                    } else {
                        layer.msg("网络异常,修改失败", {icon: 5});
                    }

                }

            });
        }
    };
    $("#saveBtn").click(function () {
        updateCase();
    });
    $("#cancelBtn").click(function () {
        var index = parent.layer.getFrameIndex(window.name);
        parent.getCaseList();
        parent.layer.close(index);
    });
</script>